<template>
  <div class="fullDiv">
    <div class="leftDiv">
      <!-- <el-form> -->
      <div class="filterMenu">
        <el-row type="flex" justify="center" :gutter="20">
          <el-col :span="8">
            <el-select v-model="value4" clearable placeholder="预设项目">
              <el-option
                v-for="(item,index) in options1"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="16">
            <el-select v-model="value5" clearable placeholder="评价标准">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div class="monItemsDiv">
        <el-checkbox-group v-model="items" size="small">
          <el-checkbox
            v-for="(item,index) in tabs"
            v-bind:key="index"
            :label="item.Id"
            border
            style="margin-top:20px"
            @change="optionMonItem($event,item.Id,item.Name,item.Name)"
          >{{item.Name}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- </el-form> -->
    </div>
    <div class="rightDiv">
      <el-table :data="monItems">
        <el-table-column prop="MonitemName" label="项目名称" width="80"></el-table-column>
        <el-table-column label="检测方法" width="250">
          <template slot-scope="scope">
            <el-select v-model="scope.row.MonMethodId" placeholder="请选择">
              <el-option
                v-for="(item,index) in scope.row.monItems_methods"
                :key="index"
                :label="item.FullName"
                :value="item.Id"
              >
                <span style="float: left">{{ item.FullName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.MehodStatus }}</span>
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="资质">
          <template slot-scope="scope">{{scope.row.HasQualify?'是':'否'}}</template>
        </el-table-column>
        <el-table-column label="外包">
          <template slot-scope="scope">{{scope.row.isOutSource?'是':'否'}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click.native.prevent="deleteRow(scope.$index,scope.row.MonitemId)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    monItems1: {
      type: Array,
      default: () => []
    },
    tagId: {
      type: String,
      default: ''
    }
  },
  //   computed: {
  //     monItems: {
  //       set: function(value) {
  //         this.monItems1 = value
  //       },
  //       get: function() {
  //         this.monItems1
  //       }
  //     }
  //   },
  updated: function () {
    this.sendMsg()
  },
  data () {
    const item = [
      {
        date: '2016-05-02',
        itemName: 'PH'
      }
    ]

    const item3 = [
      {
        value: '选项1',
        label: '全部'
      },
      {
        value: '选项2',
        label: '水质64项'
      },
      {
        value: '选项3',
        label: '水质88项'
      },
      {
        value: '选项4',
        label: '水质108项'
      }
    ]
    const item4 = [
      {
        value: '选项1',
        label: 'XXX评价标准1'
      },
      {
        value: '选项2',
        label: 'XXX评价标准2'
      },
      {
        value: '选项3',
        label: 'XXX评价标准3'
      }
    ]
    return {
      items: [],
      monItems: this.monItems1,
      tabs: [],
      tableData: item,
      options1: item3,
      options2: item4,
      value4: '',
      value5: '',
      // monItems_methods: [
      //   {
      //     id: '1',
      //     value1: '（无资质)',
      //     label: '水质 pH值的测定 玻璃电极法(GB6920-1986)'
      //   },
      //   {
      //     id: '2',
      //     value1: '（无资质)',
      //     label: 'pH 水质 自动分析仪技术要求(HJ/T96-2003)'
      //   },
      //   {
      //     id: '3',
      //     value1: '（有资质）',
      //     label:
      //       '水质自动监测 pH值的测定 玻璃电极法(《水和废水监测分析方法》（第四版）国家环境保护总局 （2002年）)'
      //   },
      //   {
      //     id: '4',
      //     value1: '（有资质)',
      //     label:
      //       'pH值 便携式pH计法(《水和废水监测分析方法》(第四版)国家环境保护总局(2002))'
      //   },
      //   {
      //     id: '5',
      //     value1: '（无资质)',
      //     label: '生活饮用水标准检验方法 感官性状和物理指标(GB/T5750.4-2006)'
      //   }
      // ],
      value6: ''
    }
  },
  watch: {
    tagId () {
      this.getMonItemByTagID()
    }
  },
  methods: {
    updateMonItems (val) {
      val.forEach(e => e)
      this.monItems.push()
    },
    optionMonItem (val, _monItemId, _monItemName, _monItemName2) {
      if (val) {
        console.log(`增加${_monItemName}`)
        var index = this.monItems.length
        var newItem = {
          MonitemName: _monItemName,
          MonitemId: _monItemId,
          // monMethodId: 'monMethodIdTest', //GetMonItems_methods(MonitemId)
          MonMethodId: '',
          monItems_methods: [],
          HasQualify: '',
          isOutSource: 'false'
        }
        this.monItems.push(newItem)
        this.getMonMethodByMonItemID(_monItemId, index)
      } else {
        this.monItems.forEach(
          e =>
            e.MonitemName === _monItemName
              ? this.monItems.splice(this.monItems.indexOf(e), 1)
              : ''
        )
        console.log(`减去${_monItemName}`)
      }
    },
    // 根据monItemId获取相关所有的监测方法
    GetMonItems_methods (MonitemId) {
      // 根据monItemId 获取所有的监测方法
      return []
    },
    sendMsg () {
      this.$emit('update:monItems1', this.monItems)
    },
    deleteRow (index, MonitemId) {
      // this.tableData.splice(index, 1)
      this.monItems.splice(index, 1)
      this.items.forEach(
        e =>
          e === MonitemId ? this.items.splice(this.items.indexOf(e), 1) : ''
      )
    },
    getMonMethodByMonItemID: function (_monItemId, index) {
      // console.log('调用成功' + index)
      this.axios
        .get('/Project/GetMonMethod', {
          params: {
            MonitemId: _monItemId
          }
        })
        .then(response => {
          // console.log(response.data)
          if (response.data != '') {
            this.monItems[index].monItems_methods = response.data
            this.monItems[index].MonMethodId = response.data[0].Id
            this.monItems[index].HasQualify = response.data[0].HasQualify
          }
          // data = response.data
        })
    },
    getMonItemByTagID () {
      this.axios
        .get('/Project/GetMonItems', {
          params: {
            tagId: this.tagId
          }
        })
        .then(response => {
          this.tabs = response.data
        })
    }
  },
  mounted () {
    this.getMonItemByTagID()
  }
}
</script>

<style lang="stylus" scoped>
.rightDiv
  float left
  width 70%
  height 100%
  overflow auto
.monItemsDiv
  overflow auto
  height 80%
.leftDiv
  // background-color rgb(238, 241, 246)
  float left
  width 30%
  height 100%
.fullDiv
  height 500px
  border 1px solid #eee
.el-checkbox
  width 20%
  margin-left 10px
.filterMenu
  height 20%
</style>
